<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>氨基酸数据库-氨基酸计算</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="../bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="../css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="../css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="../css/sweetalert.css">
    <link rel="stylesheet" href="../css/custom-pwl.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="../img/logo.ico">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/jquery.nicescroll.min.js"></script>
    <link rel="stylesheet" href="../css/jquery-ui.css">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <!-- jQuery UI JS -->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="../js/jquery-ui.js"></script>

    <!-- Tweaks for older IEs-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .large-checkbox {
            width: 1.5em;
            height: 1.5em;
        }
    </style>
</head>
<body>
<div class="page">
    <!-- 顶部导航-->
    <header class="header">
        <nav class="navbar">
            <div class="container-fluid">
                <div class="navbar-holder d-flex align-items-center justify-content-between">
                    <div class="navbar-header">
                        <!-- 顶部左侧logo -->
                        <a href="../index.html" class="navbar-brand d-none d-sm-inline-block">
                            <div class="brand-text d-none d-lg-inline-block"><strong>氨基酸数据库</strong></div>
                            <div class="brand-text d-none d-sm-inline-block d-lg-none"><strong>CATD</strong></div>
                        </a>
                        <!-- 顶部右侧下拉菜单图标-->
                        <a id="toggle-btn" href="#" class="menu-btn active"><span></span><span></span><span></span></a>
                    </div>
                    <!-- 下拉菜单 -->
                    <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
                        <li class="nav-item dropdown">
                            <a href="#" class="dropdown-toggle dropdown-user-link" data-toggle="dropdown">
                                <span class="dropdown-user-name">
                                    <i>你好，姓名</i>
                                </span>
                            </a>
                            <div class="dropdown-menu pull-right dropdown-menu-bigbox">
                                <div class="dropdown-menu-bigbox-top">
                                    <div id="user_name" class="dropdown-menu-bigbox-top-user-name">
                                        <span>姓名</span>
                                    </div>
                                </div>
                                <div class="row dropdown-menu-bigbox-bottom">
                                    <div class="col-md-6 col-lg-6 col-xs-6 col-sm-6 text-center grid" style="cursor: pointer" onclick="window.location.href='../web/changePwd.html';return false">
                                        <i class="fa fa-key dropdown-menu-bigbox-bottom-icon" style="font-size: 25px;line-height: 45px;color: #438eb9;"></i>
                                        <p class="dropdown-menu-bigbox-bottom-font">
                                            <span>密码修改</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="row dropdown-menu-bigbox-exit">
                                    <div class="dropdown-menu-bigbox-exit-font">
                                        <a href="login.html" class="nav-link logout"><span>退出登录</span><i class="fa fa-sign-out"></i></a>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class=" d-flex align-items-stretch padding-top">
        <!-- 侧边导航栏 -->
        <nav class="side-navbar" id="navbar">
            <ul class="list-unstyled">
                <li ><a href="../index.html"> <i class="icon-home"></i>首页 </a></li>
                <li><a href="addAminoAcid.html" > <i class="icon-grid"></i>氨基酸管理 </a>
                </li>

                <li><a href="#culAminoAcid" data-toggle="collapse" aria-expanded="false" aria-controls="culAminoAcid">
                    <i class="fa fa-bar-chart"></i>计算 </a>
                    <ul id="culAminoAcid" class="collapse list-unstyled show">
                        <li class="active"><a href="culAminoAcid.html">氨基酸计算</a></li>
                        <li><a href="comparison.html">对比</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#culResult" data-toggle="collapse" aria-expanded="false" aria-controls="culResult">
                        <i class="fa fa-bar-chart"></i> 查看计算结果
                    </a>
                    <ul id="culResult" class="collapse list-unstyled">
                        <li><a href="culResult.html">计算结果</a></li>
                        <li><a href="uploadData.html">上传的数据</a></li>
                        <li class=><a href="comparison.html">对比的数据</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <!-- 网页主体 -->
        <div id="main-content" class="content-inner">
            <!-- 标题-->
            <!-- 面包屑导航 -->
            <div class="breadcrumb-holder container-fluid">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="../index.html">首页</a></li>
                    <li class="breadcrumb-item active">氨基酸计算</li>
                </ul>
            </div>
            <section class="client">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header d-flex align-items-center">
                                    <h3>氨基酸计算</h3>
                                </div>
                                <div class="card-body">
                                    <!-- 搜索框 -->
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group row form-inline">
                                                    <label class="col-sm-3 form-control-label">选择氨基酸</label>
                                                    <div class="col-sm-9">
                                                        <select name="account" class="form-control mb-3">
                                                            <option value="option1" selected>变量 1</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group row form-inline">
                                                    <label class="col-sm-3 form-control-label">显示数值</label>
                                                    <div class="col-sm-9">
                                                        <input type="text" class="form-control mb-3" id="variable1">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group row form-inline">
                                                    <label class="col-sm-3 form-control-label">选择氨基酸</label>
                                                    <div class="col-sm-9">
                                                        <select name="account" class="form-control mb-3">
                                                            <option value="option2">变量 2</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group row form-inline">
                                                    <label class="col-sm-3 form-control-label">显示数值</label>
                                                    <div class="col-sm-9">
                                                        <input type="text" class="form-control mb-3" id="variable2">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group row form-inline">
                                                    <label class="col-sm-3 form-control-label">选择氨基酸</label>
                                                    <div class="col-sm-9">
                                                        <select name="account" class="form-control mb-3">
                                                            <option value="option3">变量 3</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group row form-inline">
                                                    <label class="col-sm-3 form-control-label">显示数值</label>
                                                    <div class="col-sm-9">
                                                        <input type="text" class="form-control mb-3" id="variable3">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header d-flex align-items-center">
                                    <h3 class="h4">选择氨基酸并进行计算</h3>
                                    <div class="ml-auto">
                                        <button class="btn btn-primary mr-2" id="btn-add-amino">添加氨基酸</button>
                                        <button class="btn btn-primary" id="btn-remove-amino">删除选择的氨基酸</button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-hover">
                                            <thead>
                                            <tr>
                                                <th class="select-column">选择</th>
                                                <th>选择氨基酸</th>
                                                <th>显示数值</th>
                                                <th>输入数量</th>
                                            </tr>
                                            </thead>
                                            <tbody id="course-chosen">
                                            <tr>
                                                <th>
                                                    <div class="col-sm-9">
                                                        <input type="checkbox" class="form-check-input mb-3 large-checkbox">
                                                    </div>
                                                </th>
                                                <th>
                                                    <div class="col-sm-9">
                                                        <input type="text" class="form-control mb-3 amino-name-input">
                                                    </div>
                                                </th>
                                                <th>
                                                    <div class="col-sm-9">
                                                        <input type="text" class="form-control mb-3 amino-value-input" value="显示的数值" readonly>
                                                    </div>
                                                </th>
                                                <th>
                                                    <div class="col-sm-9">
                                                        <input type="number" class="form-control mb-3" id="inputQuantity" min="1">
                                                    </div>
                                                </th>
                                            </tr>
                                            </tbody>
                                        </table>
                                        <label for="nonZeroLetter">选择第一个氨基酸为:</label>
                                        <select id="nonZeroLetter" name="nonZeroLetter" required>
                                            <!-- 动态填充选项 -->
                                        </select>
                                        <button type="button" class="btn btn-primary" id="btn-count">计算</button>
                                    </div>
                                </div>
                                <button id="btn-calculate">计算</button>

                                <div id="calc-dialog" title="输入计算名称" style="display:none;">
                                    <input type="text" id="calc-name" placeholder="输入计算名称">
                                </div>

                                <div id="progress-bar" style="display:none; width: 100%;">
                                    <div id="progress" style="width: 0%; height: 20px; background-color: #4caf50;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Page Footer-->
            <footer class="main-footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-6">
                            <p>Copyright &copy; 2024. <a
                                    href="../index.html" target="_blank" title="CATD">ZWH</a></p>
                        </div>
                        <div class="col-sm-6 text-right">
                            <p></p>
                            <!-- Please do not remove the backlink to us unless you support further theme's development at https://bootstrapious.com/donate. It is part of the license conditions. Thank you for understanding :)-->
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>
</div>
<!-- JavaScript files-->
<script src="../vendor/popper.js/umd/popper.min.js"> </script>
<script src="../bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<script src="../vendor/jquery.cookie/jquery.cookie.js"> </script>
<!-- <script src="https://cdn.bootcss.com/Chart.js/2.7.0/Chart.min.js"></script> -->
<script src="../vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="../js/jquery.nicescroll.min.js"></script>
<!--<script src="../js/charts-home.js"></script>-->
<!-- Main File-->
<script src="../js/sweetalert-dev.js"></script>
<script src="../js/front.js"></script>
<!-- Custom File-->
<script src="../js/content.js"></script>
<script>
    $(document).ready(function() {
        // 初始化更新下拉列表
        updateDropdown();

        // 添加氨基酸行
        $('#btn-add-amino').click(function () {
            var newRow = `
                <tr>
                    <th>
                        <div class="col-sm-9">
                            <input type="checkbox" class="form-check-input mb-3 large-checkbox">
                        </div>
                    </th>
                    <th>
                        <div class="col-sm-9">
                            <input type="text" class="form-control mb-3 amino-name-input">
                        </div>
                    </th>
                    <th>
                        <div class="col-sm-9">
                            <input type="text" class="form-control mb-3 amino-value-input" value="显示的数值" readonly>
                        </div>
                    </th>
                    <th>
                        <div class="col-sm-9">
                            <input type="number" class="form-control mb-3" min="1">
                        </div>
                    </th>
                </tr>`;
            $('#course-chosen').append(newRow);
            updateDropdown(); // 添加新行后更新下拉列表
        });

        // 自动完成功能
        $(document).on('focus', '.amino-name-input', function () {
            $(this).autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '/amino/search',
                        type: 'GET',
                        data: {term: request.term},
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.name,
                                    value: item.name
                                };
                            }));
                        },
                        error: function (error) {
                            console.error('Error:', error);
                        }
                    });
                },
                minLength: 2,
                select: function (event, ui) {
                    var selectedName = ui.item.value;
                    var inputElement = $(this);
                    $.ajax({
                        url: '/amino/value',
                        type: 'GET',
                        data: {name: selectedName},
                        success: function (data) {
                            inputElement.closest('tr').find('.amino-value-input').val(data.value);
                            updateDropdown(); // 选择后更新下拉列表
                        },
                        error: function (error) {
                            console.error('Error:', error);
                        }
                    });
                }
            });
        });

        // 更新下拉列表
        function updateDropdown() {
            var options = '';
            $('.amino-name-input').each(function () {
                var name = $(this).val();
                if (name) {
                    options += `<option value="${name}">${name}</option>`;
                }
            });
            $('#nonZeroLetter').html(options);
        }

        // 删除选中的氨基酸行
        $('#btn-remove-amino').click(function () {
            $('#course-chosen input[type="checkbox"]:checked').closest('tr').remove();
            updateDropdown(); // 删除行后更新下拉列表
        });

        // 监听输入框的变化并更新下拉列表
        $(document).on('input', '.amino-name-input', function () {
            updateDropdown(); // 输入变化时更新下拉列表
        });

        // 对话框初始化
        $('#calc-dialog').dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                "确定": function() {
                    var calcName = $('#calc-name').val();
                    if (calcName) {
                        $(this).dialog("close");
                        performCalculation(calcName);
                    } else {
                        alert("请输入计算名称");
                    }
                }
            }
        });

        // 计算按钮点击事件
        $('#btn-calculate').click(function() {
            $('#calc-dialog').dialog('open');
        });

        // 执行计算函数
        function performCalculation(calcName) {
            var aminoData = [];
            $('#course-chosen tr').each(function() {
                var name = $(this).find('.amino-name-input').val();
                var value = $(this).find('.amino-value-input').val();
                var quantity = $(this).find('input[type="number"]').val();
                if (name && value && quantity > 0) {
                    aminoData.push({
                        name: name,
                        value: parseFloat(value),
                        quantity: parseFloat(quantity)
                    });
                }
            });

            var variable1 = parseFloat($('#variable1').val());
            var variable2 = parseFloat($('#variable2').val());
            var variable3 = parseFloat($('#variable3').val()); // 新增 variable3
            var selectedAmino = $('#nonZeroLetter').val();

            if (isNaN(variable1) || isNaN(variable2) || isNaN(variable3)) {
                alert("请输入有效的变量值");
                return;
            }

            // 显示进度条
            $('#progress-bar').show();

            $.ajax({
                url: '/amino/calculate',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    calcName: calcName,
                    aminoData: aminoData,
                    variable1: variable1,
                    variable2: variable2,
                    variable3: variable3, // 传递 variable3
                    selectedAmino: selectedAmino
                }),
                success: function(response) {
                    alert("计算完成！");
                    $('#progress-bar').hide();
                },
                error: function(error) {
                    console.error('Error:', error);
                    alert("计算失败！");
                    $('#progress-bar').hide();
                }
            });

            // 定期获取进度
            const intervalId = setInterval(function() {
                $.ajax({
                    url: '/amino/progress',
                    type: 'GET',
                    success: function(percentage) {
                        $('#progress').css('width', percentage + '%');
                        if (percentage >= 100) {
                            clearInterval(intervalId);
                        }
                    },
                    error: function(error) {
                        console.error('Error:', error);
                    }
                });
            }, 1000);
        }
    });
</script>
</body>
</html>
